﻿<!DOCTYPE html>
<html>
<head>
    <title>Media Playback</title>

    <!-- WinJS references -->
    <script type="text/javascript" src="//Microsoft.WinJS.0.6/js/base.js"></script>
    <script type="text/javascript" src="//Microsoft.WinJS.0.6/js/ui.js"></script>
    <link rel="Stylesheet" type="text/css" href="//Microsoft.WinJS.0.6/css/ui-light.css" />

    <!-- SDK Base references -->
    <link rel="stylesheet" type="text/css" href="css/base-sdk.css" />
    <script type="text/javascript" src="base-sdk.js"></script>
    <script type="text/javascript" src="jstoolkit-sdk.js"></script>

    <!-- Sample references -->
    <link rel="stylesheet" type="text/css" href="css/program.css" />
    <script type="text/javascript" src="program.js"></script>
</head>
<body role="application">
    <div id="rootGrid">
        <div id="header" role="contentinfo"></div>
        <div id="content">
            <h1 id="featureLabel">Media Playback</h1>

            <h2 id="inputLabel">Input</h2>

            <div id="input" role="main" aria-labelledby="inputLabel">
                <div class="options">
                    <h3 id="listLabel">Select scenario:</h3>
                    <select size="4" id="scenarios" aria-labelledby="listLabel">
                    </select>
                </div>
                <div class="details" role="region" aria-labelledby="descLabel" aria-live="assertive">
                    <h3 id="descLabel">Description:</h3>     
                </div>
            </div>

            <h2 id="outputLabel">Output</h2>

            <div id="output" role="region" aria-labelledby="outputLabel" aria-live="assertive">
                <div id="statusMessage"></div>
            </div>
        </div>
        <div id="footer" role="contentinfo"></div>
    </div>
</body>
</html>
